<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head>
    <meta charset="utf-8">
    <title>阿星影院在线售票</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="Author" content="larry"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <%--<link rel="shortcut icon" href="${base}/assets/images/favicon.ico">--%>
    <link rel="stylesheet" href="${base}/static/css/index/ef9cella.css">
    <link rel="stylesheet" href="${base}/static/css/index/22f5a22a.css">
    <link rel="stylesheet" href="${base}/static/css/index/8ba7074d.css">
    <link rel="stylesheet" href="${base}/assets/css/layui/layui.css">
    <style>
        @font-face {
            font-family: stonefont;
            src: url('//vfile.meituan.net/colorstone/5fdcebcb149d703ac2089c9a0f0eaf863168.eot');
            src: url('//vfile.meituan.net/colorstone/5fdcebcb149d703ac2089c9a0f0eaf863168.eot?#iefix') format('embedded-opentype'),
            url('//vfile.meituan.net/colorstone/3bbd96acd28866860d607850d46aea2f2084.woff') format('woff');
        }

        .text-center {
            text-align: center;
        }
        </style>
    <meta name="lx:autopv" content="off">
    <meta name="lx:appnm" content="movie">
    <meta name="lx:category" content="movie">
    <script src="${base}/static/js/jquery/jquery.js"></script>
</head>
<body>
<div class="header">
    <div class="header-inner" style="position: relative">
        <img src="${base}/static/image/star.png">
        <div class="ciname-name">阿星影城</div>
        <div class="search" style="position: absolute;left:900px;top:18px;" >
            <input  value="请输入..." type="txt" style="border:1px black solid;height:25px;"/>
            <button >搜一搜</button>
        </div>
        <div class="user-info">
            <div class="user-avatar has-login">

                <img src="${user.header}">
                <span class="caret"></span>
                <ul class="user-menu">
                    <li class="text">
                        <a href="${base}/ticket/user/orderInfo.page">我的订单</a>
                        <input type="hidden" name="userId" value="${user.id}">
                    </li>
                    <li class="text login-name"><a href="${base}/ticket/index/index.page">返回首页</a></li>
                    <li class="text login-name"><a href="${base}/ticket/user/userInfo.page?userId=${user.id}">个人中心</a></li>
                    <li class="text"><a href="${base}/login/logout.do" class="J-logout">退出登录</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>
<div class="header-placeholder"></div>
<div class="subnav">
    <ul class="navbar">
        <li>
            <a class="active flag" href="javascript:void(0);">正在热映</a>
        </li>
        <li>
            <a class="flag" href="javascript:void(0);">即将上映</a>
        </li>
        <%-- 正在热映1，即将上映0 --%>
        <input type="hidden" name="future" value="1">
    </ul>
</div>
<div class="container" id="app">
    <div class="movies-channel">
        <%--类型和时间分类--%>
        <div class="tags-panel">
            <ul class="tags-lines">
                <li class="tags-line" data-val="{tagTypeName:'cat'}">
                    <div class="tags-title">类型 :</div>
                    <ul class="tags">
                        <li style="background-color: #f34d41">
                            <a style="color: #fff" href="#">全部</a>
                        </li>
                        <%--渲染类型--%>
                        <c:forEach items="${types}" var="type">
                            <li>
                                <a href="#">${type}</a>
                            </li>
                        </c:forEach>
                    </ul>
                    <input type="hidden" name="kind">
                </li>
                <li class="tags-line tags-line-border" data-val="{tagTypeName:'year'}">
                    <div class="tags-title">年代 :</div>
                    <ul class="tags">
                        <li style="background-color: #f34d41">
                            <a href="#" style="color: #fff">全部</a>
                        </li>
                        <c:forEach items="${years}" var="year">
                            <li>
                                <a href="#">${year}</a>
                            </li>
                        </c:forEach>
                    </ul>
                    <input type="hidden" name="year">
                </li>
            </ul>
        </div>
        <%--影片信息--%>
        <div id="filmDiv"></div>
        <%--分页--%>
        <div class="text-center">
            <input type="hidden" name="totalCount" value="${totalCount}">
            <div id="page"></div>
        </div>
    </div>
</div>
<div class="footer" style="visibility: visible;">
    <p class="friendly-links">
        商务合作邮箱：v@maoyan.com
        客服电话：10105335
        违法和不良信息举报电话：4006018900
        <br>
        投诉举报邮箱：tousujubao@meituan.com
        舞弊线索举报邮箱：wubijubao@maoyan.com
    </p>
    <p>江苏阿星影城有限公司</p>
</div>
<script src="${base}/assets/js/layui/layui.js"></script>
<script src="${base}/assets/js/base64.js"></script>
<%-- 正在热映 影片数据渲染 --%>
<script id="filmData1" type="text/html">
    <div class="movies-list">
        <dl class="movie-list">
            {{# layui.each(d, function(index, item){ }}
            <dd>
                <div class="movie-item">
                    <a href="${base}/ticket/schedule/schedule.page?filmId={{ item.id }}&flag=1">
                        <div class="movie-poster">
                            <img class="poster-default"
                                 src="//s0.meituan.net/bs/?f=myfe/mywww:/image/loading_2.e3d934bf.png">
                            <img src="{{ item.briefPic }}">
                        </div>
                    </a>
                    <div class="movie-ver"><i class="imax3d"></i></div>
                </div>
                <div class="channel-detail movie-item-title" title="{{ item.title }}">
                    <a href="#" target="_blank" data-act="movies-click" data-val="{movieId:410629}">{{ item.title }}</a>
                </div>
                {{# if(item.sales > 0){ }}
                <div class="channel-detail channel-detail-prescore">已有<i class="integer">{{ item.sales }}</i>人买票</div>
                {{# }else{ }}
                <div class="channel-detail channel-detail-prescore"><i class="integer">{{ item.favor }}</i>人想看</div>
                {{# } }}
            </dd>
            {{# }); }}
        </dl>
    </div>
</script>
<%-- 即将上映 影片数据渲染 --%>
<script id="filmData2" type="text/html">
    <div class="movies-list">
        <dl class="movie-list">
            {{# layui.each(d, function(index, item){ }}
            <dd>
                <div class="movie-item">
                    <a href="${base}/ticket/schedule/schedule.page?filmId={{ item.id }}&flag=2">
                        <div class="movie-poster">
                            <img class="poster-default"
                                 src="//s0.meituan.net/bs/?f=myfe/mywww:/image/loading_2.e3d934bf.png">
                            <img src="{{ item.briefPic }}">
                        </div>
                    </a>
                    <div class="movie-ver"><i class="imax3d"></i></div>
                </div>
                <div class="channel-detail movie-item-title" title="{{ item.title }}">
                    <a href="#" target="_blank" data-act="movies-click" data-val="{movieId:410629}">{{ item.title }}</a>
                </div>
                {{# if(item.sales > 0){ }}
                <div class="channel-detail channel-detail-prescore">已有<i class="integer">{{ item.sales }}</i>人买票</div>
                {{# }else{ }}
                <div class="channel-detail channel-detail-prescore"><i class="integer">{{ item.favor }}</i>人想看</div>
                {{# } }}
            </dd>
            {{# }); }}
        </dl>
    </div>
</script>
<script>
    layui.use(['laypage', 'laytpl'], function () {
        var laypage = layui.laypage, laytpl = layui.laytpl;
        $(document).ready(function () {
            //初始化页面变量信息
            var curPage = "";
            var pageCount = "";
            var flag = 1;
            var filmType = "";
            var filmYears = "";
            //第一次加载页面初始化页面和影片信息
            createPage();

            //加载页码
            function createPage() {
                laypage.render({
                    elem: 'page'
                    , count: $('input[name=totalCount]').val()
                    , limit: 30
                    , theme: '#ef4238'
                    , jump: function (obj, first) {
                        //obj包含了当前分页的所有参数，比如：
                        curPage = obj.curr;
                        pageCount = obj.limit;
                        createFilms(obj.curr, obj.limit, flag, filmType, filmYears);
                    }
                });
            }

            $(".flag").on("click", function () {
                console.log($(this).text());
                $.each($(".flag"), function () {
                    $(this).removeClass("active");
                });
                $(this).addClass("active");
                if ($(this).text() === "正在热映"){
                    flag = 1;
                }else if ($(this).text() === "即将上映"){
                    flag = 2;
                }
                createFilms(1, pageCount, flag, filmType, filmYears);
            });

            //类型点击事件
            $("#app > div > div.tags-panel > ul > li:nth-child(1) > ul a").on("click", function () {
                $.each($("#app > div > div.tags-panel > ul > li:nth-child(1) > ul li"), function () {
                    $(this).css("background-color", "#fff");
                });
                $.each($("#app > div > div.tags-panel > ul > li:nth-child(1) > ul a"), function () {
                    $(this).css("color", "#363636");
                });
                $(this).parent().css("background-color", "#ef4238");
                $(this).css("color", "#fff");
                filmType = $(this).text();
                console.log(filmType);
                createFilms(1, pageCount, flag, filmType, filmYears);
                return false;
            });
            //年代点击事件
            $("#app > div > div.tags-panel > ul > li.tags-line.tags-line-border a").click(function () {
                // alert("年代");
                $.each($("#app > div > div.tags-panel > ul > li.tags-line.tags-line-border li"), function () {
                    $(this).css("background-color", "#fff");
                });
                $.each($("#app > div > div.tags-panel > ul > li.tags-line.tags-line-border a"), function () {
                    $(this).css("color", "#363636");
                });
                $(this).parent().css("background-color", "#ef4238");
                $(this).css("color", "#fff");
                filmYears = $(this).text();
                createFilms(1, pageCount, flag, filmType, filmYears);
                return false;
            });

            //渲染电影数据
            function createFilms(page, pageCount, flag, kind, year) {
                //base64处理参数
                var base = new Base64();
                if (kind !== "") {kind = base.encode(kind);}
                if (year !== "") {year = base.encode(year);}
                $.ajax({
                    url: '../film/film.do',
                    data: {"page": page, "pageCount": pageCount, "flag": flag, "kind": kind, "year": year},
                    type: 'GET',
                    dataType: 'json',
                    async: true,
                    success: function (res) {
                        if (res.success) {
                            var htmlTpl;
                            var view = document.getElementById('filmDiv');
                            if (flag == 1){
                                htmlTpl = filmData1.innerHTML;
                            }else if(flag == 2){
                                htmlTpl = filmData2.innerHTML;
                            }
                            laytpl(htmlTpl).render(res.data, function (html) {
                                view.innerHTML = html;
                            });
                        }
                    }
                });
            }

        });
    });
</script>

</body>
</html>